<template>
  <div>
<!--    电影信息视图-->
    <el-card>
      <el-row :gutter="15">
        <el-col :span="5">
          <img src="https://pic1.58cdn.com.cn/anjuke_58/b8c4116735c232379695813d56c30635?w=696&h=522&crop=1&t=1&srotate=1&w=640&h=480&crop=1" class="cover"/>
        </el-col>
        <el-col :span="18">
          <el-row class="text">
            租金：{{movie.name}}
          </el-row>
          <el-row class="text">
            房屋类型：{{movie.type}}
          </el-row>
          <el-row class="text">
            地区：{{movie.country}}
          </el-row>
          <el-row class="text">
            朝向楼层：{{movie.l}}
          </el-row>
          <el-row class="text">
            详细地址：{{movie.startDate}}
          </el-row>
          <el-row class="text">
            经纪人：{{movie.director}}
          </el-row>
          <el-row class="text">
            简介：{{movie.description}}
          </el-row>
          <el-row style="display: flex;justify-content: flex-end">
            <template v-if="this.isLike===false">
              <i class="el-icon-star-on" style="font-size: 35px;color:gainsboro"></i>
              <el-button  class="btn" @click="like">收藏</el-button>
            </template>
            <template v-else>
              <i class="el-icon-star-on" style="font-size: 35px;color: orange"></i>
              <el-button  class="btn" @click="unLike">取消</el-button>
            </template>
          </el-row>
          <el-row style="display: flex;justify-content: flex-end">
            <el-button class="btn" @click="dialogFormVisible = true">预约看房</el-button>

            <el-dialog title="预约" :visible.sync="dialogFormVisible">
              <el-form :model="form">
                <el-form-item label="预约时间" :label-width="formLabelWidth">
                  <el-date-picker
                    v-model="value1"
                    type="datetime"
                    placeholder="选择日期时间">
                  </el-date-picker>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
              </div>
            </el-dialog>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import qs from 'qs'
export default {
  data () {
    return {
      isLike: false,
      dialogFormVisible: false,
      movie: {
        name: '2000元/月',
        type: '2室2厅1卫  75 平  简单装修',
        country: '江苏南京',
        l: '南  高层 / 12层',
        startDate: '江苏省南京市栖霞区',
        director: '小马',
        description: '超值便宜，性价比极高，有家的味道。'
      },
      formLabelWidth: '120px',
      value1: ''
    }
  },
  created () {
    this.initMovie()
  },
  methods: {
    async initMovie () {
      var movieName = this.$route.query.movieName
      const res = await this.$http.get('/movie/search', { params: { keyword: movieName } })
      if (res.data.success === false) {
        this.$message.error(res.data.message)
      } else {
        this.movie = res.data.content[0]
      }
      this.initLike()
      this.initScheduleList()
    },
    async initLike () {
      var userId = window.sessionStorage.getItem('userId')
      const res = await this.$http.get('/movie/' + this.movie.id + '/' + userId)
      if (res.data.success === false) {
        this.$message.error(res.data.message)
      } else {
        if (res.data.content.islike === 0) {
          this.isLike = false
        } else {
          this.isLike = true
        }
      }
    },
    async initScheduleList () {
      const res = await this.$http.get('/schedule/search/audience', { params: { movieId: this.movie.id } })
      if (res.data.success === false) {
        this.$message.error(res.data.message)
      } else {
        this.scheduleList = res.data.content
      }
    },
    getDate (n) {
      var dateTime = new Date()
      dateTime = dateTime.setDate(dateTime.getDate() + n - 1)
      dateTime = new Date(dateTime)
      return dateTime.toLocaleDateString()
    },
    // getScheduleListByDate (n) {
    //   var res = []
    //   var dateTime = new Date()
    //   dateTime = dateTime.setDate(dateTime.getDate() + n - 1)
    //   dateTime = new Date(dateTime)
    //   for (var i = 0, len = this.scheduleList.length; i < len; i++) {
    //     if (this.scheduleList[i].startTime.getDate() === dateTime.getDate()) {
    //       var schedule = {}
    //       schedule.movieName = this.scheduleList[i].movieName
    //       schedule.hallName = this.scheduleList[i].hallName
    //       schedule.startTime = this.formatTime(this.scheduleList[i].startTime)
    //       schedule.endTime = this.formatTime(this.scheduleList[i].endTime)
    //       schedule.fare = this.scheduleList[i].fare
    //       res.push(schedule)
    //     }
    //   }
    //   return res
    // },
    buyTicket (id) {
      this.$router.push({ path: '/movieBuy', query: { scheduleId: id } })
    },
    formatDate (date) {
      return new Date(date).toLocaleDateString()
    },
    formatTime (date) {
      return new Date(date).toLocaleString()
    },
    formatStartTime (row, column) {
      return this.formatTime(row.startTime)
    },
    formatEndTime (row, column) {
      return this.formatTime(row.endTime)
    },
    async like () {
      this.isLike = true
      var userId = window.sessionStorage.getItem('userId')
      const res = await this.$http.post('/movie/' + this.movie.id + '/like', qs.stringify({
        userId: userId
      }))
      if (res.data.success === false) {
        this.$message.error(res.data.message)
      } else {
        this.$message.success('收藏成功！')
      }
    },
    async unLike () {
      this.isLike = false
      var userId = window.sessionStorage.getItem('userId')
      const res = await this.$http.post('/movie/' + this.movie.id + '/unlike', qs.stringify({
        userId: userId
      }))
      if (res.data.success === false) {
        this.$message.error(res.data.message)
      } else {
        this.$message.success('取消收藏成功！')
      }
    }
  }
}
</script>

<style scoped>
  .btn {
    display: flex;
    justify-self: right;
  }
  .cover {
    width: 220px;
    height: 300px;
  }
  .text{
    margin-bottom: 5px;
  }
  .btn{
    background-color: #07c4a8;
    color: white;
    font-weight: bold;
  }
  .move-enter-active, .move-leave-active {
    transition: all .5s ease;
  }

  .move-enter, .move-leave-active {
    opacity: 0;
  }
</style>
